<template>
  <el-dialog
    ref="k_dia"
    :title="title"
    :visible.sync="open"
    width="1000px"
    class="dia-style k-dia"
    :close-on-click-modal="false"
    @close="handleCancel"
  >
    <el-form
      ref="form"
      :model="formData"
      label-width="140px"
      label-position="left"
      style="padding: 0 10px"
      @submit.native.prevent
    >
      <!-- 基础信息部分 -->
      <div class="upload-title-box">
        <div class="upload-title">基础信息</div>
        <el-checkbox v-model="showRequired" @change="changeShow">仅展示必填信息</el-checkbox>
      </div>
      <HkForm
        ref="hkFormRef1"
        :form-labels="basicArr"
        :rules="formRules"
        :data="formData"
        :dict-list="dictList"
        :btn-hidden="true"
        label-width="140"
        label-position="left"
        @handleEvent="handleEvent"
      />

      <!-- 增加表格 -->
      <div v-if="!showRequired">
        <div class="upload-title-box">
          <div class="upload-title">应急响应内容</div>
        </div>
        <AddTable ref="add_table" :table-data="tableData" :table-list="tableFieldList" />
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>

  </el-dialog>
</template>
<script>
import HkForm from '@/components/Hk-Form'
import {
  getMetricsLists,
  emergencyPlanAdd,
  emergencyPlanEdit,
  queryContentByMainId,
  queryById
} from '@/api/dispose/emergencyResponsePlan'
import { deepClone } from '@/utils'
import AddTable from '@/components/Common/addTable.vue'
export default {
  components: { HkForm, AddTable },
  props: {
    form: {
      type: Object,
      default() {
        return {}
      }
    },
    title: {
      type: String,
      default() {
        return '添加'
      }
    }
  },
  data() {
    return {
      // 仅展示必填信息
      showRequired: true,
      // 是否显示遮罩层
      open: false,
      formData: {},
      rules: {
        processName: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }
        ],
        reKpiCode: [
          {
            required: true,
            message: '请输入关联事件',
            trigger: 'change'
          }
        ]
      },
      kpiOptions: [],
      tableData: [],
      tableFieldList: [
        { label: '标题', param: 'title', type: 'input', hidden: true, maxlength: 100 },
        { label: '内容', param: 'content', type: 'input', hidden: true, maxlength: 500 }
      ],
      // 基础信息
      basicArr: [
        {
          label: '名称',
          field: 'processName',
          type: 'input',
          maxlength: 100
        },
        {
          label: '关联事件',
          field: 'reKpiCode',
          type: 'select',
          list: 'reKpiCodeList',
          maxlength: 100
        },
        {
          label: '描述',
          field: 'description',
          type: 'textarea',
          hidden: false,
          attrs: {
            rows: 4, cols: 4
          },
          maxlength: 500
        },
        {
          label: '启用状态',
          field: 'useStatus',
          hidden: false,
          type: 'switch',
          activeValue: 1,
          inactiveValue: 0
        }
      ],
      dictList: {},
      // 表单校验
      formRules: {
        processName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        reKpiCode: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  },
  computed: {},
  watch: {
    form: {
      handler(newVal) {
        this.formData = deepClone(newVal)
        if (newVal.id) {
          // 查询应急响应内容
          queryContentByMainId({ id: newVal.id }).then((res) => {
            this.tableData = res
          })
        }
      },
      deep: true
    }
  },
  created() {
    getMetricsLists().then((res) => {
      this.dictList.reKpiCodeList = res.map((i, index) => {
        return { label: i.metricsName, value: i.metricsCode }
      })
    })
  },
  mounted() {},
  methods: {
    //  显示弹窗
    show(id) {
      this.showRequired = true
      this.changeShow()
      if (id) {
        queryById({ id: id }).then((res) => {
          this.formData = res
        })
        // 查询应急响应内容
        queryContentByMainId({ id: id }).then((res) => {
          this.tableData = res
        })
      } else {
        this.tableData = []
      }
      this.open = true
    },
    //  显示必填项
    changeShow() {
      this.basicArr.forEach((item) => {
        if (typeof item.hidden === 'boolean') {
          item.hidden = this.showRequired
        }
      })
    },
    /** 保存 */
    async submitForm() {
      const res = await this.$refs.hkFormRef1.handleFormSubmit('formLabels')
      let tableDatas = []
      if (this.tableData) {
        tableDatas = this.tableData.map(i => {
          return { title: i.title, content: i.content }
        })
      }
      // TODO 提交表单
      if (!this.formData.id) {
        emergencyPlanAdd(Object.assign(this.formData, { emergencyPlanContentList: tableDatas })).then((res) => {
          this.$message.success('保存成功')
          this.handleCancel()
          this.$emit('handleSave')
        })
      } else {
        emergencyPlanEdit(Object.assign(this.formData, { emergencyPlanContentList: tableDatas })).then((res) => {
          this.$message.success('保存成功')
          this.handleCancel()
          this.$emit('handleSave')
        })
      }
    },
    /** 取消 */
    handleCancel() {
      this.open = false
      this.tableData = []
      this.$refs.hkFormRef1.resetForm('formLabels')
    },
    /** 增加弹框数据 */
    AddClick() {
      const arr = {
        title: '',
        content: ''
      }
      this.tableData.push(arr)
    },
    /** 删除 */
    MoveClick(scope) {
      this.tableData.splice(scope.index, 1)
    },
    /** 关联事件触发事件 */
    handleEvent(val) {
      console.log(val)
      if (val.field == 'reKpiCode') {
        const currentItem = this.dictList.reKpiCodeList.filter((i) => {
          return i.value == val.value
        })
        this.formData.kpiName = currentItem[0].label
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.upload-title-box {
  height: 60px;
  width: 100%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba($color: #000000, $alpha: 8%);
  .upload-title {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
  }
}
.email-dia {
  display: flex;
  height: 540px;
  width: 100%;
  justify-content: space-between;
  max-height: 100vh;

  aside {
    padding: 0;
    width: 140px !important;
    position: absolute;
    height: 540px;
    background: #fff;
    border-right: 1px solid #e8e8e8;

    .option-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;

      li {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 15px 0 15px 24px;
        cursor: pointer;
        font-size: 14px;
        color: #303032;
        font-weight: 400;

        &.activeLink {
          border-right: 2px solid #2979ff;
          background: #dfecff;
          color: #2979ff;
        }
      }
    }
  }

  .dia-form {
    margin-left: 140px;
    padding: 24px 80px 24px 24px;
    width: 100%;
    height: 100%;
  }

  .el-table {
    margin-top: 0;
  }
}
</style>
<style>
.k-dia.dia-style .el-dialog .el-dialog__body {
  padding: 0 !important;
}
</style>
